<template>
  <div class="app-container">
    供应商零件列表
    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{ (current - 1) * size + scope.$index + 1 }}</template>
      </el-table-column>

      <el-table-column prop="supplierName" label="供应商" width="200" />

      <el-table-column prop="componentName" label="零件"  width="200"/>

      <el-table-column prop="price" label="价格" width="315"/>



      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <router-link :to="'/supplierComponent/update/'+scope.row.id"> <!--路由跳转 -->
            <el-button type="primary" size="mini" icon="el-icon-edit" >修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete"  @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="size"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>

<script>
// 引入调用supplierComponent.js
import supplierComponent from "@/api/supplierComponent/supplierComponent";

export default {

  data() {
    // 定义变量和初始值
    return {
      list: null, // 查询之后接口返回的集合
      current: 1, // 当前页
      size: 10, // 每页记录数
      total: 0, // 总记录数
    };
  },
  created() {
    // 页面渲染之前执行，一般调用methods
    this.getList();
  },
  methods: {
    // 查询供应商零件列表的方法
    getList(current = 1) {
      //current=1 的意思是如果不传参默认current为1，传参就是传的值，和java不一样
      this.current = current;
      supplierComponent
        .getsupplierComponentList(this.current, this.size)
        .then(response => {
          // 请求成功
          //response接口返回得数据
          //console.log(response)
          this.list = response.data.records;
          this.total = response.data.total;
          console.log(this.list);
          console.log(this.total);
        })
        .catch(error => {
          // 请求失败
          console.log(error);
        });
    },

    // 删除讲师
    removeDataById(id) {
      this.$confirm("是否删除?", '提示', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {// 点击确定，调用then方法
          //调用删除的方法
          supplierComponent.deleteSupplierComponentById(id).then(response => {//删除成功
            // 提示信息
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            //回到列表页面
            this.getList()
          })
        })
    }
  }
};
</script>
